<template>
  <div class="report-container">
    <div v-if="showSuccessPage" class="success-page">
      <div class="success-icon">
        <el-icon class="check-icon"><Check /></el-icon>
        <div class="success-circle"></div>
      </div>
      <h2>问卷提交成功！</h2>
      <p>谢谢您对市委巡察组工作的支持，我们将尽快核实您的信访投诉问题。</p>
      <el-button type="primary" @click="closeSuccessPage">关闭</el-button>
    </div>
    <div v-else class="report-form-container">
      <div class="header">
        <h1>济南高新区党工委第四轮巡察</h1>
        <h1>{{ departmentGroupName }}巡察组信访投诉</h1>
      </div>
      <div class="info-container">
        <p>
          根据《纪检监察机关处理检举控告工作规则》《中国共产党纪律检查机关控告申诉工作条例》《中华人民共和国监察法》有关规定，检举、控告、申诉人在检举、控告、申诉活动中必须对所检举、控告、申诉的事实的真实性负责。接受调查、询问时，应如实提供情况和证据。如有诬陷、制造假证行为，必须承担纪律和法律责任。根据规定，巡察组主要受理巡察范围内涉及被巡察党组织班子及其成员、区党工委管理的其他干部及下一级单位主要负责人、被巡察单位其他工作人员（以上均含离退休、已调离）涉嫌违纪或者职务违法、职务犯罪问题的来信、来电、来访、网络举报等，对其他与巡察工作无直接关系的申诉求决类、意见建议类、涉法涉诉类、征地拆迁类等信访问题，将按规定交有关部门处理。
        </p>
      </div>

      <h1 v-if="department === 'medical'" style="text-align: center;font-size: 20px; color: #333;">被巡察单位：发展改革和科技经济部、创业服务中心及6个村（社区）（含章锦工作组）</h1>
      <h1 v-else-if="department === 'petition'" style="text-align: center;font-size: 20px; color: #333;">被巡察单位：教育文体部（含35所中小学、20所幼儿园）</h1>
      <h1 v-else-if="department === 'education'" style="text-align: center;font-size: 20px; color: #333;">被巡察单位：孙村街道及32个村（社区）</h1>
      

      <el-form :model="form" label-width="100%" class="report-form">
        <el-form-item label="1. 信访投诉方式" required>
          <div class="radio-container">
            <el-radio v-model="form.reportType" :label="1">1.匿名举报</el-radio>
            <el-radio v-model="form.reportType" :label="2">2.实名举报</el-radio>
          </div>
        </el-form-item>

        <!-- 实名举报时显示的信息 -->
        <template v-if="form.reportType === 2">
          <el-form-item label="2. 信访人姓名" required>
            <el-input v-model="form.reporterName" placeholder="请输入信访人姓名"></el-input>
          </el-form-item>

          <el-form-item label="3. 信访人身份证号" required>
            <el-input v-model="form.reporterIdCard" placeholder="请输入信访人身份证号"></el-input>
          </el-form-item>

          <el-form-item label="4. 信访人手机号" required>
            <el-input v-model="form.reporterPhone" placeholder="请输入信访人手机号"></el-input>
          </el-form-item>

          <el-form-item label="5. 信访人联系地址" required>
            <el-input v-model="form.reporterAddress" placeholder="请输入信访人联系地址"></el-input>
          </el-form-item>
        </template>

        <el-form-item :label="form.reportType === 2 ? '6. 被反映人单位' : '2. 被反映人单位'" required>
          <el-input v-model="form.reportedUnit" placeholder="请输入被反映人单位"></el-input>
        </el-form-item>

        <el-form-item :label="form.reportType === 2 ? '7. 被反映人姓名' : '3. 被反映人姓名'" required>
          <el-input v-model="form.reportedPerson" placeholder="请输入被反映人姓名"></el-input>
        </el-form-item>

        <el-form-item :label="form.reportType === 2 ? '8. 主要反映问题' : '4. 主要反映问题'" required>
          <el-input v-model="form.mainIssue" type="textarea" rows="4" placeholder="请描述主要反映问题"></el-input>
        </el-form-item>

        <div class="upload-section">
          <el-form-item :label="form.reportType === 2 ? '9. 上传图片材料' : '5. 上传图片材料'">
            <el-upload 
              action="#" 
              list-type="picture-card" 
              :auto-upload="false" 
              :on-change="handleImageChange"
              :file-list="form.imageList" 
              :limit="3" 
              :on-exceed="handleExceed" 
              accept=".jpg,.jpeg,.png"
              :on-preview="handleImagePreview"
            >
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
            <div class="format-info">格式限制为jpg、jpeg、png，最多三张</div>
          </el-form-item>

          <el-form-item :label="form.reportType === 2 ? '10. 上传视频材料' : '6. 上传视频材料'">
            <el-upload 
              action="#" 
              :auto-upload="false" 
              :on-change="handleVideoChange"
              :file-list="form.videoList"
              :limit="1" 
              :on-exceed="handleExceed" 
              accept=".mp4" 
              list-type="picture-card"
              :on-preview="handleVideoPreview"
            >
              <el-icon>
                <VideoCamera />
              </el-icon>
            </el-upload>
            <div class="format-info">格式限制为mp4，最多一条</div>
          </el-form-item>

          <el-form-item :label="form.reportType === 2 ? '11. 其它补充材料' : '7. 其它补充材料'">
            <div class="format-info">格式不限，大小不超过50MB，多个文件可上传压缩包</div>
            <div class="other-files-container">
              <el-upload 
                action="#" 
                :auto-upload="false" 
                :on-change="handleOtherChange"
                :file-list="form.otherList"
                :on-remove="handleRemoveOther" 
                accept="*" 
                :before-upload="beforeOtherUpload"
              >
                <el-button type="primary" icon="Plus">上传文件</el-button>
              </el-upload>
            </div>
          </el-form-item>
        </div>

        <!-- <el-form-item :label="form.reportType === 2 ? '12. 为本条举报选择标签' : '8. 为本条举报选择标签'">
          <div class="tag-container">
            <el-tag v-for="tag in availableTags" :key="tag.value"
              :class="{ 'tag-selected': selectedTags.includes(tag.value) }" @click="toggleTag(tag.value)">
              {{ tag.label }}
            </el-tag>
          </div>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="submitForm" icon="Upload" style="width: 99%; height: 45px; font-size: 18px;font-weight: bold;" :loading="uploading"> 
            {{ uploading ? `提交中 (${uploadProgress}%)` : '提交' }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 添加上传进度对话框 -->
      <el-dialog
        v-model="showProgressDialog"
        title="文件上传进度"
        width="30%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false">
        <el-progress :percentage="uploadProgress" :stroke-width="18" status="success"></el-progress>
        <div class="progress-text">上传中，请耐心等待，不要关闭页面...</div>
      </el-dialog>

      <!-- 图片预览对话框 -->
      <el-dialog v-model="dialogVisible" title="图片预览">
        <img :src="dialogImageUrl" alt="预览图片" style="width: 100%;" />
      </el-dialog>

      <!-- 视频预览对话框 -->
      <el-dialog v-model="videoDialogVisible" title="视频预览" width="70%">
        <video 
          v-if="videoUrl" 
          :src="videoUrl" 
          controls 
          style="width: 100%;"
          class="video-preview"
        ></video>
      </el-dialog>

      <!-- 验证码对话框 -->
      <el-dialog
        v-model="showVerifyDialog"
        title="安全验证"
        width="400px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="true">
        <div class="verify-code-container">
          <div class="verify-code-title">请输入验证码</div>
          <div class="verify-code-image" @click="refreshVerifyCode">
            <img v-if="verifyCodeImageUrl" :src="verifyCodeImageUrl" alt="验证码" />
            <div v-else class="loading-image">加载中...</div>
          </div>
          <div class="verify-code-hint">看不清？点击图片刷新</div>
          <el-input 
            v-model="verifyCodeInput" 
            placeholder="请输入验证码" 
            maxlength="4"
            class="verify-code-input"
          ></el-input>
          <div class="verify-buttons">
            <el-button @click="showVerifyDialog = false">取消</el-button>
            <el-button type="primary" @click="submitWithVerifyCode" :loading="verifyingCode">
              确定
            </el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Plus, VideoCamera, Document, Delete, Check } from '@element-plus/icons-vue'
import { ElMessage, ElLoading } from 'element-plus'
import { submitReport, getVerifyCode } from '../api/report'

const route = useRoute()
const router = useRouter()
const department = computed(() => route.params.department || 'medical')

const departmentMap = {
  'medical': '区医保局',
  'petition': '区信访局',
  'education': '区教体局'
}

// 根据部门ID获取部门名称
const departmentName = computed(() => {
  return departmentMap[department.value] || '区医保局'
})

// 根据部门ID获取巡察组名称
const departmentGroupName = computed(() => {
  const groupMap = {
    'medical': '第一',
    'petition': '第二',
    'education': '第三'
  }
  return groupMap[department.value] || '第一'
})

// 上传状态和进度
const uploading = ref(false)
const uploadProgress = ref(0)
const showProgressDialog = ref(false)

// 验证码相关
const showVerifyDialog = ref(false)
const verifyCodeImageUrl = ref('')
const verifyCodeUuid = ref('')
const verifyCodeInput = ref('')
const verifyingCode = ref(false)

// 成功页面
const showSuccessPage = ref(false)

// 可选标签
const availableTags = [
  { label: '行贿受贿嫌疑', value: '行贿受贿嫌疑' },
  { label: '失职渎职嫌疑', value: '失职渎职嫌疑' },
  { label: '作风问题', value: '作风问题' },
  { label: '其他问题', value: '其他问题' }
]

// 已选标签
const selectedTags = ref([])

// 切换标签选择状态
const toggleTag = (tagValue) => {
  const index = selectedTags.value.indexOf(tagValue)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  } else {
    selectedTags.value.push(tagValue)
  }
}

// 表单数据
const form = ref({
  reportType: 1,
  reporterName: '',
  reporterIdCard: '',
  reporterPhone: '',
  reporterAddress: '',
  reportedUnit: '',
  reportedPerson: '',
  mainIssue: '',
  images: [],
  videos: [],
  otherFiles: [],
  imageList: [],
  videoList: [],
  otherList: []
})

// 图片预览相关
const dialogVisible = ref(false)
const dialogImageUrl = ref('')

// 视频预览相关
const videoDialogVisible = ref(false)
const videoUrl = ref('')

// 处理图片预览
const handleImagePreview = (file) => {
  dialogImageUrl.value = file.url || URL.createObjectURL(file.raw)
  dialogVisible.value = true
}

// 处理视频预览
const handleVideoPreview = (file) => {
  // 释放上一次创建的预览 URL
  if (videoUrl.value && videoUrl.value.startsWith('blob:')) {
    URL.revokeObjectURL(videoUrl.value)
  }
  // 使用原始视频文件进行预览，忽略缩略图 URL
  videoUrl.value = URL.createObjectURL(file.raw)
  videoDialogVisible.value = true
}

// 检查文件类型和大小是否符合要求
const validateFile = (file, type) => {
  // 检查文件类型
  if (type === 'image') {
    const isImage = file.type.indexOf('image/') !== -1
    if (!isImage) {
      ElMessage.error('只能上传图片文件!')
      return false
    }
    // 限制大小为10MB
    const isLt10M = file.size / 1024 / 1024 < 10
    if (!isLt10M) {
      ElMessage.error('图片大小不能超过10MB!')
      return false
    }
  } else if (type === 'video') {
    const isVideo = file.type === 'video/mp4'
    if (!isVideo) {
      ElMessage.error('只能上传MP4格式的视频文件!')
      return false
    }
    // 限制大小为50MB
    const isLt50M = file.size / 1024 / 1024 < 50
    if (!isLt50M) {
      ElMessage.error('视频大小不能超过50MB!')
      return false
    }
  } else if (type === 'other') {
    // 限制大小为50MB
    const isLt50M = file.size / 1024 / 1024 < 50
    if (!isLt50M) {
      ElMessage.error('文件大小不能超过50MB!')
      return false
    }
  }
  return true
}

// 处理文件数量超出限制
const handleExceed = () => {
  ElMessage.warning('已超出允许的上传数量限制')
}

// 处理图片上传
const handleImageChange = (file) => {
  if (!validateFile(file.raw, 'image')) {
    return false
  }
  
  // 为上传的图片创建预览URL
  file.url = URL.createObjectURL(file.raw)
  
  form.value.images.push(file.raw)
  return true
}

// 处理视频上传
const handleVideoChange = (file, fileList) => {
  if (!validateFile(file.raw, 'video')) {
    return false
  }
  // 只保留最新一个文件
  form.value.videoList = [file]
  form.value.videos = [file.raw]
  // 先将url置空，显示加载中状态
  file.url = ''  
  // 用新数组替换，确保触发视图更新
  // 绑定的 file-list 会渲染到 UI
  // form.value.videoList 已更新，无需手动操作 DOM
  
  // 生成视频缩略图并更新 url
  generateVideoThumbnail(file.raw).then(thumbnailUrl => {
    // 通过替换数组项触发列表更新
    form.value.videoList = form.value.videoList.map(item => {
      if (item.uid === file.uid) {
        return { ...item, url: thumbnailUrl }
      }
      return item
    })
  }).catch(err => {
    console.error('生成视频缩略图失败:', err)
  })
  
  // 返回 false 阻止自动上传行为
  return false
}

// 生成视频缩略图的函数
const generateVideoThumbnail = (videoFile) => {
  return new Promise((resolve, reject) => {
    // 创建视频元素
    const video = document.createElement('video')
    video.preload = 'auto'
    video.playsInline = true
    video.muted = true
    video.crossOrigin = 'anonymous'
    
    // 创建视频URL
    const videoUrl = URL.createObjectURL(videoFile)
    video.src = videoUrl
    
    // 尝试多个时间点来获取非黑屏帧
    const timePoints = [1, 2, 3, 4, 5];
    let currentTimeIndex = 0;
    let thumbnailCaptured = false;
    
    // 视频加载元数据后设置尺寸
    video.onloadedmetadata = () => {
      console.log('视频元数据已加载，宽度:', video.videoWidth, '高度:', video.videoHeight);
    };
    
    // 当视频可以播放时
    video.oncanplay = () => {
      // 如果已经捕获了缩略图，跳过
      if (thumbnailCaptured) return;
      
      // 尝试设置到第一个时间点
      tryNextTimePoint();
    };
    
    // 尝试下一个时间点
    const tryNextTimePoint = () => {
      if (currentTimeIndex >= timePoints.length) {
        // 已尝试所有时间点，仍然没有成功捕获
        // 使用最后一帧作为缩略图
        captureFrame();
        return;
      }
      
      // 设置当前时间点
      console.log('尝试时间点:', timePoints[currentTimeIndex]);
      video.currentTime = timePoints[currentTimeIndex];
      currentTimeIndex++;
    };
    
    // 当时间更新时捕获帧
    video.onseeked = () => {
      if (thumbnailCaptured) return;
      captureFrame();
    };
    
    // 捕获当前帧作为缩略图
    const captureFrame = () => {
      try {
        thumbnailCaptured = true;
        
        // 创建canvas元素
        const canvas = document.createElement('canvas');
        // 确保有有效的尺寸
        const width = video.videoWidth || 320;
        const height = video.videoHeight || 180;
        canvas.width = width;
        canvas.height = height;
        
        console.log('正在捕获帧，宽度:', width, '高度:', height);
        
        // 将视频帧绘制到canvas
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, width, height);
        
        // 检查是否是黑屏
        const imageData = ctx.getImageData(0, 0, width, height);
        const pixels = imageData.data;
        let isBlackFrame = true;
        
        // 采样检查像素（不检查所有像素以提高性能）
        for (let i = 0; i < pixels.length; i += 40) {
          const r = pixels[i];
          const g = pixels[i + 1];
          const b = pixels[i + 2];
          
          // 如果像素不是黑色（有一定亮度）
          if (r > 20 || g > 20 || b > 20) {
            isBlackFrame = false;
            break;
          }
        }
        
        if (isBlackFrame && currentTimeIndex < timePoints.length) {
          // 当前帧是黑屏，尝试下一个时间点
          thumbnailCaptured = false;
          tryNextTimePoint();
          return;
        }
        
        // 转换为图片URL
        const thumbnailUrl = canvas.toDataURL('image/jpeg');
        
        // 释放资源
        URL.revokeObjectURL(videoUrl);
        video.pause();
        video.src = '';
        
        console.log('成功生成缩略图');
        resolve(thumbnailUrl);
      } catch (error) {
        console.error('生成缩略图时出错:', error);
        reject(error);
      }
    };
    
    // // 设置错误处理
    // video.onerror = (e) => {
    //   console.error('视频加载错误:', e);
    //   URL.revokeObjectURL(videoUrl);
    //   reject(new Error('视频加载失败'));
    // };
    
    // 设置超时处理
    const timeout = setTimeout(() => {
      if (!thumbnailCaptured) {
        console.log('生成缩略图超时，使用备用方法');
        // 超时后，使用最简单的方法尝试生成
        try {
          // 强制设置一个时间点
          video.currentTime = 3;
          
          const canvas = document.createElement('canvas');
          const width = video.videoWidth || 320;
          const height = video.videoHeight || 180;
          canvas.width = width;
          canvas.height = height;
          
          const ctx = canvas.getContext('2d');
          ctx.fillStyle = '#f0f0f0'; // 使用浅灰色背景
          ctx.fillRect(0, 0, width, height);
          
          // 尝试绘制视频帧
          ctx.drawImage(video, 0, 0, width, height);
          
          // 添加视频图标确保用户知道这是视频
          ctx.fillStyle = 'rgba(0,0,0,0.5)';
          ctx.fillRect(width/2 - 30, height/2 - 30, 60, 60);
          ctx.beginPath();
          ctx.moveTo(width/2 - 10, height/2 - 15);
          ctx.lineTo(width/2 + 20, height/2);
          ctx.lineTo(width/2 - 10, height/2 + 15);
          ctx.closePath();
          ctx.fillStyle = '#fff';
          ctx.fill();
          
          const thumbnailUrl = canvas.toDataURL('image/jpeg');
          URL.revokeObjectURL(videoUrl);
          resolve(thumbnailUrl);
        } catch (error) {
          console.error('备用缩略图生成失败:', error);
          reject(error);
        }
      }
    }, 5000);
    
    // 加载完成后清除超时
    video.onloadeddata = () => {
      // 同样设置初始时间点
      if (!thumbnailCaptured) {
        tryNextTimePoint();
      }
    };
    
    // 触发视频加载
    console.log('开始加载视频以生成缩略图');
    video.load();
  });
};

// 处理其他文件上传前的验证
const beforeOtherUpload = (file) => {
  return validateFile(file, 'other')
}

// 处理其他文件上传
const handleOtherChange = (file) => {
  if (!validateFile(file.raw, 'other')) {
    return false
  }
  form.value.otherFiles.push(file.raw)
  return true
}

// 移除其他文件
const handleRemoveOther = (file) => {
  const index = form.value.otherFiles.findIndex(item => item.uid === file.raw.uid)
  if (index !== -1) {
    form.value.otherFiles.splice(index, 1)
  }
}

// 获取验证码
const getVerificationCode = async () => {
  try {
    // 获取验证码图片数据，现在直接返回 arraybuffer
    const response = await getVerifyCode()
    
    // 从响应数据创建Blob对象
    const blob = new Blob([response.data], { type: 'image/jpeg' })
    
    // 创建验证码图片URL
    verifyCodeImageUrl.value = URL.createObjectURL(blob)
    
    // 从响应头获取UUID (如果有的话)
    if (response.headers && response.headers.verifycodeuuid) {
      verifyCodeUuid.value = response.headers.verifycodeuuid
    }
  } catch (error) {
    console.error('获取验证码失败:', error)
    ElMessage.error('获取验证码失败，请稍后重试')
  }
}

// 刷新验证码
const refreshVerifyCode = () => {
  // 释放旧的 URL
  if (verifyCodeImageUrl.value) {
    URL.revokeObjectURL(verifyCodeImageUrl.value)
    verifyCodeImageUrl.value = ''
  }
  verifyCodeInput.value = ''
  // 重新获取验证码
  getVerificationCode()
}

// 提交表单前先显示验证码
const confirmSubmit = () => {
  // 验证表单
  if (!form.value.reportedUnit) {
    ElMessage.error('请填写被反映人单位')
    return
  }
  if (!form.value.reportedPerson) {
    ElMessage.error('请填写被反映人姓名')
    return
  }
  if (!form.value.mainIssue) {
    ElMessage.error('请填写主要反映问题')
    return
  }
  
  // 实名举报时的额外验证
  if (form.value.reportType === 2) {
    if (!form.value.reporterName) {
      ElMessage.error('请填写信访人姓名')
      return
    }
    if (!form.value.reporterIdCard) {
      ElMessage.error('请填写信访人身份证号')
      return
    }
    if (!form.value.reporterPhone) {
      ElMessage.error('请填写信访人手机号')
      return
    }
    if(!form.value.reporterAddress){
      ElMessage.error('请填写信访人联系地址')
      return
    }
  }

  // 显示验证码对话框
  showVerifyDialog.value = true
  
  // 获取验证码
  getVerificationCode()
}

// 带验证码提交
const submitWithVerifyCode = async () => {
  // 验证码校验
  if (!verifyCodeInput.value) {
    ElMessage.error('请输入验证码')
    return
  }
  
  verifyingCode.value = true
  
  try {
    // 先验证验证码是否正确
    const verifyResult = await import('../api/report').then(module => module.verifyCode(verifyCodeInput.value))
    console.log("verifyResult",verifyResult)
    // 如果验证失败，提示用户
    if (verifyResult.code !== 200) {
      ElMessage.error('验证码错误，请重新输入')
      refreshVerifyCode()
      verifyingCode.value = false
      return
    }

    ElMessage.success('验证成功！请耐心等待数据上传')
    
    // 验证通过，提交表单
    await doSubmitForm()
    
    // 提交成功后关闭验证码对话框
    showVerifyDialog.value = false
    
    // 释放验证码图片资源
    if (verifyCodeImageUrl.value) {
      URL.revokeObjectURL(verifyCodeImageUrl.value)
      verifyCodeImageUrl.value = ''
    }
    
    // 重置验证码相关数据
    verifyCodeInput.value = ''
    
    // 显示成功页面
    showSuccessPage.value = true
  } catch (error) {
    console.error('提交失败:', error)
    
    // 如果是验证码错误，刷新验证码
    if (error.response && error.response.data && 
        (error.response.data.msg?.includes('验证码') || 
         error.response.status === 400)) {
      refreshVerifyCode()
      ElMessage.error('验证码错误，请重新输入')
    } else {
      ElMessage.error('提交失败，请稍后重试')
    }
  } finally {
    verifyingCode.value = false
  }
}

// 实际提交表单的方法
const doSubmitForm = async () => {
  // 显示进度对话框
  showProgressDialog.value = true
  uploading.value = true
  uploadProgress.value = 0

  try {
    // 创建FormData对象用于文件上传
    const formData = new FormData()
    // 将数字类型转换为对应的文本
    formData.append('reportType', form.value.reportType === 1 ? '匿名举报' : '实名举报')
    formData.append('reportedUnit', form.value.reportedUnit)
    formData.append('reportedPerson', form.value.reportedPerson)
    formData.append('mainIssue', form.value.mainIssue)
    
    // 添加验证码信息 - 验证已通过，所以只需添加验证码
    formData.append('verifyCode', verifyCodeInput.value.toLowerCase()) // 转为小写，避免大小写问题

    // 添加标签
    if (selectedTags.value.length > 0) {
      formData.append('tags', JSON.stringify(selectedTags.value))
    }

    // 添加实名举报信息
    if (form.value.reportType === 2) {
      formData.append('reporterName', form.value.reporterName)
      formData.append('reporterIdCard', form.value.reporterIdCard)
      formData.append('reporterPhone', form.value.reporterPhone)
      formData.append('reporterAddress', form.value.reporterAddress)
    }

    // 计算文件总大小，用于自定义进度计算
    let totalFileSize = 0
    
    // 添加图片文件
    form.value.images.forEach((image, index) => {
      formData.append(`image${index}`, image)
      totalFileSize += image.size
    })

    // 添加视频文件
    form.value.videos.forEach((video, index) => {
      formData.append(`video${index}`, video)
      totalFileSize += video.size
    })

    // 添加其他文件
    form.value.otherFiles.forEach((file, index) => {
      formData.append(`file${index}`, file)
      totalFileSize += file.size
    })

    // 有文件上传时的进度回调处理
    const hasFiles = form.value.images.length > 0 || form.value.videos.length > 0 || form.value.otherFiles.length > 0
    
    // 自定义进度处理，保留上传过程中的85%，剩余15%留给后端处理
    const onProgress = (progress) => {
      if (hasFiles) {
        // 上传部分占85%，后台处理占15%
        uploadProgress.value = Math.min(Math.floor(progress * 0.85), 85)
      } else {
        // 没有文件时也显示进度，但直接前进到90%
        uploadProgress.value = Math.min(progress, 90)
      }
    }

    // 创建一个人工延迟的函数，模拟后端处理时间
    const simulateBackendProcessing = async () => {
      // 文件越大，可能的处理时间越长，这里按文件大小调整延迟
      const delayBase = hasFiles ? (totalFileSize > 10 * 1024 * 1024 ? 3000 : 2000) : 1000
      
      // 从85%慢慢增长到99%
      for (let i = uploadProgress.value; i < 99; i += 1) {
        await new Promise(resolve => setTimeout(resolve, delayBase / 14)) // 平均分配总延迟
        uploadProgress.value = i
      }
    }

    // 调用API提交报告，传入进度回调
    const uploadPromise = submitReport(department.value, formData, onProgress)
    
    // 同时启动人工延迟
    const processingPromise = simulateBackendProcessing()
    
    // 等待上传完成
    await uploadPromise
    
    // 设置100%并显示完成状态
    uploadProgress.value = 100
    // 延迟关闭进度对话框，让用户能看到100%的状态
    await new Promise(resolve => setTimeout(resolve, 500))
    
    uploading.value = false
    showProgressDialog.value = false
    ElMessage.success('举报信息提交成功')

    // 重置表单
    resetForm()
    
    return Promise.resolve()
  } catch (error) {
    console.error(error)
    uploading.value = false
    showProgressDialog.value = false
    
    // 提供更详细的错误信息
    let errorMessage = '提交失败，请稍后重试'
    if (error.response && error.response.data && error.response.data.msg) {
      errorMessage = error.response.data.msg
    } else if (error.message) {
      if (error.message.includes('timeout')) {
        errorMessage = '请求超时，文件可能过大，请稍后检查是否提交成功或分批上传'
      } else {
        errorMessage = `提交失败: ${error.message}`
      }
    }
    
    ElMessage.error(errorMessage)
    return Promise.reject(error)
  }
}

// 修改原来的提交函数指向新的验证流程
const submitForm = confirmSubmit

// 关闭成功页面
const closeSuccessPage = () => {
  showSuccessPage.value = false
}

// 重置表单
const resetForm = () => {
  form.value = {
    reportType: 1,
    reporterName: '',
    reporterIdCard: '',
    reporterPhone: '',
    reporterAddress: '',
    reportedUnit: '',
    reportedPerson: '',
    mainIssue: '',
    images: [],
    videos: [],
    otherFiles: [],
    imageList: [],
    videoList: [],
    otherList: []
  }
  selectedTags.value = []
  uploadProgress.value = 0
}

// 当组件卸载时清理创建的URL对象
onBeforeUnmount(() => {
  // 清理所有预览URL
  if (dialogImageUrl.value && dialogImageUrl.value.startsWith('blob:')) {
    URL.revokeObjectURL(dialogImageUrl.value)
  }
  
  if (videoUrl.value && videoUrl.value.startsWith('blob:')) {
    URL.revokeObjectURL(videoUrl.value)
  }
  
  if (verifyCodeImageUrl.value && verifyCodeImageUrl.value.startsWith('blob:')) {
    URL.revokeObjectURL(verifyCodeImageUrl.value)
  }
  
  // 清理表单中的文件预览URL
  form.value.imageList.forEach(file => {
    if (file.url && file.url.startsWith('blob:')) {
      URL.revokeObjectURL(file.url)
    }
  })
  
  form.value.videoList.forEach(file => {
    if (file.url && file.url.startsWith('blob:')) {
      URL.revokeObjectURL(file.url)
    }
  })
})
</script>

<style scoped>
@import '../assets/header.css';
@import '../assets/btn.css';
@import '../assets/form.css';
@import '../assets/success.css';
@import '../assets/verify.css';
@import '../assets/file.css';
.report-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.progress-text {
  text-align: center;
  margin-top: 20px;
  color: #606266;
}

</style> 